<script lang="ts" setup>
import {getNavHead, getNavHeadServer} from "@/api/common";
import {getStorage, setStorage} from "@/utils";

defineProps({
  activeNav:String
})
const navList = ref([])

// onMounted(async ()=>{
//  const nav =  getStorage('nav')
//   if(nav){
//     navList.value = nav
//   }else{
//     const head= await getNavHead()
//     navList.value = head.data
//     setStorage('nav',head.data)
//   }
// })
const {data}= await getNavHeadServer()
navList.value = data
const routerMap = {
  'product':2,
  'solution':3,
  'partner':4,
  'cases':5,
  'about':6,
}
</script>

<template>
<div>
  <transition name="dropdown-fade-show">
    <div class="ht-dropdown-menu">
      <template v-for="item in navList">
        <div class="menu-item " :class="routerMap[activeNav]===item.id?activeNav:''" v-if="item.id!==2&&item.id!==6&&item.id!==3" >
          <NuxtLink :to="`${item.router}?type=${i.id}`" target="_blank" v-for="i in item.children">{{i['programaName']}}</NuxtLink>
        </div>
<!--        解决方案-->
        <div class="menu-item " :class="routerMap[activeNav]===item.id?activeNav:''" v-if="item.id===3" >
          <NuxtLink :to="`${item.router}/${i.id}`" target="_blank" v-for="i in item.children">{{i['programaName']}}</NuxtLink>
        </div>
        <div class="menu-item " :class="routerMap[activeNav]===item.id?activeNav:''" v-if="item.id==6" >
<!--          关于-->
          <div v-for="i in item.children">
            <template v-if="i.id!==11&&i.id!==14">
              <NuxtLink :to="`${i['router']}`" target="_blank">{{ i['programaName']  }}</NuxtLink>
            </template>
<!--            简介 荣誉-->
            <template v-else>
              <NuxtLink :to="`${item['router']}?type=${i.id}`" target="_blank">{{ i['programaName']  }}</NuxtLink>
            </template>
          </div>
        </div>
      </template>
    </div>
  </transition>
</div>
</template>

<style scoped lang="scss">
.ht-dropdown-menu {
  position: absolute;
  width: 12rem;
  //background: #fff;
  left: 8rem;

  .menu-item {
    width: 2.73rem;
    background: #FFFFFF;
    min-height: 2rem;
    border-radius: 0 0 0.13rem 0.13rem;
    display: none;

    a {
      display: block;
      font-size: 0.23rem;
      font-weight: 400;
      color: #111111;
      padding: 0.19rem 0;
      //text-align: center;
      padding-left: 0.5rem;

      &:hover {
        color: #2E6AFF;
        font-size: 0.23rem;
        width: 2.48rem;
        background: #EFF0F2;
        border-radius: 0.09rem;
      }
    }

    padding: 0.25rem 0.13rem;

    &.solution {
      transform: translateX(1.3rem);
      height: auto;
      opacity: 1;
      display: inline-block;
    }

    &.partner {
      transform: translateX(3rem);
      height: auto;
      opacity: 1;
      display: inline-block;
    }

    &.cases {
      transform: translateX(4.7rem);
      height: auto;
      opacity: 1;
      display: inline-block;
    }

    &.about {
      transform: translateX(6.4rem);
      height: auto;
      display: inline-block;
      opacity: 1;
    }
  }
}
</style>
